<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from "vue";
import LoginInput from "./LoginInput.vue";
import { message } from "ant-design-vue";
const [messageApi, contextHolder] = message.useMessage();

const step = ref(0);

onMounted(() => {
  document.getElementsByTagName("html")[0].style.fontSize = "16px";
});

onUnmounted(() => {
  document.getElementsByTagName("html")[0].style.fontSize =
    "calc(100vw / 1920)";
});

// const account = ref("");
// const password = ref("");
// const email = ref("");
// const code = ref("");
const codeTip = ref<number | string>("获取验证码");
const form = {
  account: {
    value: "",
    tip: "账号",
  },
  password: {
    value: "",
    tip: "密码",
  },
  email: {
    value: "",
    tip: "邮箱",
  },
  code: {
    value: "",
    tip: "验证码",
  },
  domain: {
    value: "",
    tip: "验证码",
  },
  company: {
    value: "",
    tip: "验证码",
  },
};

const getCode = () => {
  if (codeTip.value !== "获取验证码") {
    messageApi.warning("验证码已发送，请勿频繁点击");
    return;
  }

  codeTip.value = 60;
  const timer = setInterval(() => {
    if (typeof codeTip.value === "number") {
      codeTip.value = codeTip.value - 1;
      if (codeTip.value === 0) {
        clearInterval(timer);
        codeTip.value = "获取验证码";
      }
    } else {
      clearInterval(timer);
    }
  }, 1000);
};

const nextStep = () => {
  step.value++;
  return;
  if (form.account.value === "" || form.account.value.length < 6) {
    messageApi.warning("请检查" + form.account.tip + ",账号长度必须大于6位");
    return;
  }
  if (form.password.value === "") {
    messageApi.warning("请检查" + form.password.tip);
    return;
  }
  if (
    form.email.value === "" ||
    !/^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/.test(
      form.email.value
    )
  ) {
    messageApi.warning("请检查" + form.email.tip);
    return;
  }
  if (form.code.value === "") {
    messageApi.warning("请检查" + form.code.tip);
    return;
  }

  if (
    !/^(?![A-Za-z]+$)(?![A-Z\d]+$)(?![A-Z\W]+$)(?![a-z\d]+$)(?![a-z\W]+$)(?![\d\W]+$)\S{8,16}$/.test(
      form.password.value
    )
  ) {
    messageApi.warning(
      "密码长度8——16个字符，且区分大小写不能使用空格、中文密码需要使用大写字母、小写字母、数字及特殊符号中至少三种的组合"
    );
    return;
  }
  step.value++;
};

const prevStep = () => {
  step.value--;
};

const submit = () => {
  messageApi.success("注册成功，返回登录!");
  setTimeout(() => {
    location.href = "#/login";
  }, 2000);
};

const showAgreement = ref<{
  show: boolean,
  type: 'privacy' | 'contract'
}>({
  show: false,
  type: 'privacy'
})

</script>
<template>
  <div class="w-full h-full flex justify-center flex-col items-center bg-grid bg-slate-50">
    <div class="flex flex-col justify-center items-center" :class="step === 0 ? 'show' : 'hide'">
      <div class="w-40 mb-5"><img src="/logo.svg" alt="logo" /></div>
      <div class="w-105 pb-15 rounded-md shadow-xl shadow-grey-800 bg-white flex flex-col items-center pl-10 pr-10">
        <h2 class="text-2xl text-center mt-10 mb-10">注册账号</h2>
        <LoginInput class="mb-6" placeholder="请输入账号" @update="(e) => (form.account.value = e)" />
        <LoginInput class="mb-6" placeholder="请输入邮箱" type="email" @update="(e) => (form.email.value = e)" />
        <LoginInput class="mb-6" placeholder="请输入验证码" @update="(e) => (form.code.value = e)">
          <input type="button"
            class="w-25 border-l-1 border-gray-300 border-0 text-sm color-grey-500 absolute top-0 right-0 bg-transparent cursor-pointer h-full"
            :value="codeTip" @click="getCode" />
        </LoginInput>

        <LoginInput placeholder="请输入密码" type="password" @update="(e) => (form.password.value = e)" />
        <p class="mt-5 w-full flex items-center">
          <span class="text-sm">已有账号？去</span>
          <a class="text-sm text-green-500 cursor-pointer" href="#/login">
            登录
          </a>
        </p>
        <input type="button" value="下一步" @click="nextStep"
          class="w-40 h-9 rounded mt-10 text-base text-white bg-green-600 border-0 cursor-pointer" />
      </div>
    </div>

    <!--  -->
    <!--  -->
    <contextHolder class="msg" />
    <!--  -->
    <!--  -->

    <div class="flex flex-col justify-center items-center absolute" :class="step !== 0 ? 'show' : 'hide'">
      <div class="w-40 mb-5"><img src="/logo.svg" alt="logo" /></div>
      <div class="w-105 pb-20 rounded-md shadow-xl shadow-grey-800 bg-white flex flex-col items-center pl-10 pr-10">
        <h2 class="text-2xl text-center mt-10 mb-10">完善信息</h2>
        <!-- <LoginInput class="mb-6" placeholder="请输入邮箱" type="email" /> -->
        <LoginInput class="mb-6" placeholder="请输入公司名称" @update="(e) => (form.company.value = e)" />
        <LoginInput class="mb-6" placeholder="请输入域名" @update="(e) => (form.domain.value = e)" />

        <p class="mt-5 w-full flex items-center">
          <input type="checkbox" class="mr-1" />
          <span class="text-sm">我已同意</span>
          <span class="text-sm text-green-500 cursor-pointer"
            @click="showAgreement.type = 'contract', showAgreement.show = true">
            《用户协议》
          </span>
          <span class="text-sm">和</span>
          <span class="text-sm text-green-500 cursor-pointer"
            @click=" showAgreement.type = 'privacy', showAgreement.show = true">
            《隐私声明》
          </span>
        </p>

        <div class="flex">
          <input type="button" value="上一步" @click="prevStep"
            class="w-40 h-9 rounded mt-10 text-base text-white bg-green-400 hover:bg-green-600 border-0 cursor-pointer" />

          <input type="button" value="提交" @click="submit"
            class="ml-5 w-40 h-9 rounded mt-10 text-base text-white bg-green-600 border-0 cursor-pointer" />
        </div>
      </div>
    </div>
  </div>
  <!-- agreement -->
  <div>
    <a-drawer v-model:open="showAgreement.show" class="custom-class" root-class-name="root-class-name"
      :root-style="{ color: 'blue' }" style="color: red" :title="showAgreement.type === 'privacy' ? '隐私声明' : '用户协议'"
      placement="right">
      <p>
        用户协议和隐私声明
        用户协议和隐私声明
        用户协议和隐私声明
        用户协议和隐私声明
      </p>
    </a-drawer>
  </div>
</template>
<style lang="scss" scoped>
.bg-grid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='%23f1f5f9'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
}

@keyframes showAni {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes hideAni {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.show {
  opacity: 0;
  animation: showAni 0.5s forwards;
}

.hide {
  opacity: 1;
  visibility: hidden;
  animation: hideAni 0.5s forwards;
}
</style>
<style>
.ant-message span {
  font-size: 14px;
}
</style>
